import { Drawer, Form, Input, Select, Button } from 'antd';
import style from '../../container/index.css';
import React from 'react';

const FormLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 15 },
};
const FormItem = Form.Item;
const Option = Select.Option;
const Create = ({ form, formList, submitForm, visible, onClose }) => {
  const { getFieldDecorator } = form;
  const getOptionItem = (data) => {
    return data.map(item => {
      return (
        <Option value={item.value} key={item.key}>
          {item.label}
        </Option>
      );
    });
  };
  const formBody = formList.map(item => {
    if (item.type === 'input') {
      return (
        <FormItem
          key={item.key}
          label={item.label}
          required={item.required}
          {...FormLayout}

        >
          {getFieldDecorator(item.key, {
            rules: [{
              required: item.required,
            }],
          })(
            <Input type="text" placeholder={item.placeholder}/>,
          )}
        </FormItem>
      );
    } else if (item.type === 'select') {
      return (
        <FormItem
          key={item.key}
          label={item.label}
          required={item.required}
          {...FormLayout}
        >
          {getFieldDecorator(item.key, {
            initialValue: item.option[0].value,
            rules: [{
              required: item.required,
            }],
          })(
            <Select
              style={{ width: 100 }}
            >
              {getOptionItem(item.option)}
            </Select>,
          )}
        </FormItem>
      );
    }
  });

  return (
    <Drawer
      visible={visible}
      title={'create network'}
      width={500}
      onClose={onClose}
    >
      <Form onSubmit={(e) => {
        e.preventDefault();
        form.validateFields((err, values) => {
          if (!err) {
            // 提交表单
            submitForm(values);
          }
        });
      }}>

        {formBody}
        <div
          className={style['drawer-button-box']}
        >
          <Button
            style={{
              marginRight: 8,
            }}
            htmlType="button"
            onClick={onClose}
          >
            Cancel
          </Button>
          <Button type="primary" htmlType="submit"
          >
            Submit
          </Button>
        </div>
      </Form>

    </Drawer>
  );
};
export default Form.create()(Create);
